<template>
  <page-layout :title="'订单编号：'+detail.orderNo+'            下单时间：'+detail.createTime">
    <!-- actions -->
    <a-row slot="extra" class="status-list">
      <a-col :xs="24" :sm="24">
        <div class="text">订单状态</div>
        <div class="heading">{{detail.status_dictText}}</div>
      </a-col>
    </a-row>
    <detail-list slot="headerContent" size="small">
      <detail-list-item term="实付金额">{{detail.amount}}</detail-list-item>
      <detail-list-item term="付款方式">{{detail.payChannel_dictText}}</detail-list-item>
      <detail-list-item term="付款时间">{{detail.payTime}}</detail-list-item>
      <detail-list-item term="买家">{{detail.nickname}}</detail-list-item>
      <detail-list-item term="买家手机号">{{detail.phone}}</detail-list-item>
      <detail-list-item term="买家备注">{{detail.customerRemark}}</detail-list-item>
    </detail-list>

    <a-row v-if="detail.invoiceType" style="margin-bottom: 15px">
      <a-col :xs="24" :sm="24">
        <a-card title="发票信息" size="small">
          <detail-list :col="2">
            <detail-list-item term="发票类型">{{detail.invoiceType == null ? "无发票" : detail.invoiceType == 1 ? '个人发票' : '企业发票'}}</detail-list-item>
            <detail-list-item term="收票人手机号">{{detail.invoicePhone}}</detail-list-item>
            <detail-list-item term="收票人邮箱">{{detail.invoiceMail}}</detail-list-item>
            <detail-list-item term="单位名称" v-if="detail.invoiceCompanyName">{{detail.invoiceCompanyName}}</detail-list-item>
            <detail-list-item term="纳税人识别号" v-if="detail.invoiceCompanyCode">{{detail.invoiceCompanyCode}}</detail-list-item>
          </detail-list>
        </a-card>
      </a-col>
    </a-row>

    <a-row>
      <a-col :xs="12" :sm="12">
        <a-card title="收件人信息" size="small">
          <detail-list :col="2">
            <detail-list-item term="收货人姓名">{{detail.addressInfoObj.name}}</detail-list-item>
            <detail-list-item term="收货人电话">{{detail.addressInfoObj.tel}}</detail-list-item>
            <detail-list-item term="省市区县">{{detail.addressInfoObj.fullName?detail.addressInfoObj.fullName.split(' ')[0]:''}}</detail-list-item>
            <detail-list-item term="详细地址">{{detail.addressInfoObj.fullName}}</detail-list-item>
          </detail-list>
        </a-card>
      </a-col>
      <a-col :xs="12" :sm="12">
        <a-card title="订单进度1" v-if="detail.status==5" size="small">
          <a-steps :direction="isMobile() && 'vertical' || 'horizontal'" :current="0">
            <a-step title="交易取消">
            </a-step>
          </a-steps>
        </a-card>
        <a-card title="订单进度" v-else size="small">
          <div style="padding:22px 0;">
            <a-steps :direction="isMobile() && 'vertical' || 'horizontal'" :current="detail.status-1">
              <a-step title="买家下单">
              </a-step>
              <a-step title="买家付款">
              </a-step>
              <a-step title="平台发货">
              </a-step>
              <a-step title="买家评价">
              </a-step>
              <a-step title="交易成功">
              </a-step>
            </a-steps>
          </div>
        </a-card>

      </a-col>
    </a-row>

    <!-- 包裹信息 -->
    <a-tabs default-active-key="1">
      <a-tab-pane v-for="(item,index) in detail.packagesObj" :key="index" :tab="'包裹'+(index+1)">
        <a-table :columns="packagesColumns" :dataSource="[item]" :pagination="false" size="small">
          <template slot="sendTime" slot-scope="text">
            {{text|timestampToTime}}
          </template>
          <template slot="logisticsCompany" slot-scope="text,record">
            {{record.logisticsCompany.label}}
          </template>

          <template slot="good_items" slot-scope="text, record">
            <div v-for="(item,index) in record.items" :key="index" style="display:flex;">
              <div style="padding:5px;">
                <img style="width:40px;" :src="item.imgUrl">
              </div>
              <div style="line-height:25px;">
                <div>{{item.spuName}}</div>
                <div>{{item.skuName}}</div>
              </div>
            </div>
          </template>
        </a-table>
      </a-tab-pane>

    </a-tabs>
    <!-- <a-card v-if="tabList.length>0" style="margin-top: 15px" :tabList="tabList" :activeTabKey="activeTabKey"
      @tabChange="(key) => {operation = detail.packagesObj[key*1]}" size="small">

    </a-card> -->
    <!-- 商品信息 -->
    <a-card title="商品信息" size="small" style="margin-top: 15px">
      <a-table :columns="goodsColumns" :dataSource="detail.skuList" bordered :pagination="false" size="small">
        <template slot="shopName">
          {{detail.shopName}}
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else height="55px" :src="text" alt="" style="max-width:80px;font-size: 12px;font-style: italic;" />
        </template>

        <template slot="subTotal" slot-scope="text,record">
          <span>{{(record.subTotal*1+record.changePrice*1-record.couponDiscount*1-record.shopCouponDiscount*1-record.integralDiscount*1).toFixed(2)}}</span>
          <span style="padding-left:10px;" v-if="record.changePrice*1>0||record.changePrice*1<0">
            <a-tooltip>
              <template slot="title">
                原价：{{record.subTotal}}
              </template>
              <a-icon type="exclamation-circle" />
            </a-tooltip>
          </span>
        </template>

      </a-table>
    </a-card>

    <deliver-modal ref="deliverForm" @ok="modalFormOk" />
    <change-deliver ref="changeDeliver" @ok="modalFormOk" />
  </page-layout>
</template>

<script>
import { postAction, getAction } from '@/api/manage'
import { mixinDevice } from '@/utils/mixin.js'
import PageLayout from '@/components/page/PageLayout'
import DetailList from '@/components/tools/DetailList'
import DeliverModal from './DeliverModal'
import ChangeDeliver from './ChangeDeliver'
const DetailListItem = DetailList.Item
export default {
  name: "OmsOrderPtForm",
  components: {
    PageLayout,
    DetailList,
    DetailListItem,
    DeliverModal, ChangeDeliver
  },
  mixins: [mixinDevice],
  data () {
    return {
      active_refund_orderSkuId: '',
      active_refund_visible: false,
      active_refund_confirmLoading: false,
      active_refund_amount: 0,
      active_refund_reason: '',
      sRemark: false,
      shopRemark: '',
      tabList: [],
      activeTabKey: '1',
      packagesColumns: [
        {
          title: '快递名称',
          dataIndex: 'logisticsCompany',
          key: 'logisticsCompany',
          scopedSlots: { customRender: 'logisticsCompany' },
        },
        {
          title: '物流单号',
          dataIndex: 'logisticsNo',
          key: 'logisticsNo'
        },
        {
          title: '发货时间',
          dataIndex: 'sendTime',
          key: 'sendTime',
          scopedSlots: { customRender: 'sendTime' },
        },
        {
          title: '商品信息',
          dataIndex: 'items',
          key: 'items',
          scopedSlots: { customRender: 'good_items' },
        }
      ],
      operation: [],
      detail: {
        addressInfoObj: {}
      },

      goodsColumns: [
        {
          title: '店铺',
          dataIndex: 'id',
          key: 'id',
          scopedSlots: { customRender: 'shopName' },
        },
        {
          title: '商品图片',
          dataIndex: 'imgUrl',
          key: 'imgUrl',
          scopedSlots: { customRender: 'imgSlot' },
        },
        {
          title: '商品标题',
          dataIndex: 'spuName',
          key: 'spuName'
        },
        {
          title: '规格',
          dataIndex: 'skuName',
          key: 'skuName'
        },
        {
          title: '单价',
          dataIndex: 'skuPrice',
          key: 'skuPrice'
        },
        {
          title: '数量',
          dataIndex: 'num',
          key: 'num'
        },
        // {
        //   title: '店铺优惠',
        //   dataIndex: 'shopCouponDiscount',
        //   key: 'shopCouponDiscount'
        // },
        {
          title: '平台优惠',
          dataIndex: 'couponDiscount',
          key: 'couponDiscount'
        },
        {
          title: '积分抵扣',
          dataIndex: 'integralDiscount',
          key: 'integralDiscount'
        },
        {
          title: '小计(元)',
          dataIndex: 'subTotal',
          key: 'subTotal',
          scopedSlots: { customRender: 'subTotal' }
        }

      ]
    }
  },
  filters: {
    statusFilter (status) {
      const statusMap = {
        'agree': '成功',
        'reject': '驳回'
      }
      return statusMap[status]
    },
    statusTypeFilter (type) {
      const statusTypeMap = {
        'agree': 'success',
        'reject': 'error'
      }
      return statusTypeMap[type]
    },
    timestampToTime (timestamp) {
      var date = new Date(Number(timestamp))//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      var strDate = Y + M + D + h + m + s
      return strDate//2020-07-30 01:05:54
    }
  },
  methods: {
    modalFormOk () {
      // 新增/修改 成功时，重载列表
      this.$emit('ok')

    },

    edit (record) {
      this.tabList = []
      this.operation = []
      this.detail = Object.assign({}, record)

      if (this.detail.packagesObj && this.detail.packagesObj.length > 0) {
        for (let i = 0; i < this.detail.packagesObj.length; i++) {
          this.tabList.push({
            key: i,
            tab: '包裹' + (i + 1)
          })
        }
        this.operation.push(this.detail.packagesObj[0])
      }
      this.visible = true

    },

    handleCancel (e) {
      this.active_refund_visible = false
    },


    handleEditFH (record) {
      console.log(record)
      this.$refs.deliverForm.edit(record)
      this.$refs.deliverForm.title = '发货'
      this.$refs.deliverForm.ruleForm.orderNo = record.id
    },
    handleEditWL (record) {
      console.log(record)
      this.$refs.changeDeliver.edit(record)
    },
  },

}
</script>

<style lang="less" scoped>
.detail-layout {
  margin-left: 44px;
}
.text {
  color: rgba(0, 0, 0, 0.45);
}

.heading {
  color: rgba(0, 0, 0, 0.85);
  font-size: 20px;
}

.no-data {
  color: rgba(0, 0, 0, 0.25);
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}

.mobile {
  .detail-layout {
    margin-left: unset;
  }
  .text {
  }
  .status-list {
    text-align: left;
  }
}
</style>